<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            background-color: red;
            display: block;
            font-family: cursive;
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <script>
        var canvas = document.querySelector('canvas') //理解为一个画板
        var ctx = canvas.getContext('2d')  //画纸
        canvas.width = 800
        canvas.height = 800
        //划线
        ctx.beginPath() //落笔
        ctx.moveTo(100, 100)  // x  y  起点
        ctx.lineTo(200, 200)  // x  y  终点
        ctx.strokeStyle = 'black' //画笔的颜色
        ctx.stroke()  //划线的实现
        ctx.closePath() //提笔

        //画空心矩形
        ctx.beginPath() //落笔
        ctx.strokeStyle = 'blue'
        ctx.strokeRect(80, 80, 100, 200)  // x y width height
        ctx.closePath() //提笔
        //画实心矩形
        ctx.beginPath() //落笔
        ctx.fillStyle = 'yellow'
        ctx.fillRect(500, 100, 100, 200)
        ctx.closePath() //提笔
        //画空心弧度
        ctx.beginPath() //落笔
        ctx.arc(300, 300, 100, 0, Math.PI * 2)  //x y 半径 起始角度 终止角度
        ctx.strokeStyle = 'orange'
        ctx.stroke()
        ctx.closePath() //提笔
        //画实心弧度
        ctx.beginPath() //落笔
        ctx.arc(600, 300, 100, 0, Math.PI)  //x y 半径 起始角度 终止角度
        ctx.strokeStyle = 'pink'
        ctx.stroke()
        ctx.closePath() //提笔

        //画空心文字
        ctx.beginPath()
        ctx.font = '60px cursive'
        ctx.strokeStyle = 'green'
        ctx.strokeText('理工', 600, 600)  //内容  x   y
        ctx.closePath()

        //画实心文字
        ctx.beginPath()
        ctx.font = '60px cursive'
        ctx.fillStyle = 'green'
        ctx.fillText('理工', 400, 600)  //内容  x   y
        ctx.closePath()
    </script>
</body>

</html>